<template>
    <NuxtLayout name="default">
        <div class="flex flex-1 gap-4 overflow-hidden">
            <div class="flex flex-col shrink-0 w-[360px] bg-body rounded-lg border border-br-lighter">
                <div class="m-3">
                    <editor-option type="mj" />
                </div>
                <el-scrollbar>
                    <div class="p-4 pt-0 flex flex-col gap-4 relative">
                        <!-- 正向提示词 -->
                        <editor-prompt
                            v-model="formData.prompt_in"
                            :engine="formData.engine"
                        />

                        <!-- 参考图上传 -->
                        <editor-upload v-model="formData.image_ref" type="image" />

                        <!-- 绘画尺寸 -->
                        <mj-size v-model="formData.scale" />

                        <!-- 绘画模型 -->
                        <mj-models v-model="formData.model" />

                        <!-- 模式选择 -->
                        <mj-channel v-model="formData.other_params.mode" />

                        <!-- 风格选择 -->
                        <mj-styles
                            v-if="formData.model === 'niji'"
                            v-model="formData.other_params.style"
                        />

                        <!-- 版本选择 -->
                        <mj-version v-model="formData.version" />

                        <!-- 高级参数 -->
                        <mj-options v-model="formData.complex_params" />
                    </div>
                </el-scrollbar>

                <div class="m-3 mt-0">
                    <create-button />
                </div>
            </div>

            <GalleryResult />
        </div>
    </NuxtLayout>
</template>

<script setup lang="ts">
import CreateButton from './_components/common/create-button.vue'
import EditorOption from './_components/common/editor-option.vue'
import EditorPrompt from './_components/common/editor-prompt.vue'
import EditorUpload from './_components/common/editor-upload.vue'
import GalleryResult from './_gallery/index.vue'
import MjSize from './_components/mj/mj-size.vue'
import MjModels from './_components/mj/mj-models.vue'
import MjStyles from './_components/mj/mj-styles.vue'
import MjChannel from './_components/mj/mj-channel.vue'
import MjVersion from './_components/mj/mj-version.vue'
import MjOptions from './_components/mj/mj-options.vue'
import { formData, getDrawConfig, resetFormData } from './hooks/useDrawEffect'

onMounted(async () => {
    await resetFormData({
        engine: 'mj',
        action: 'generate',
        model: 'mj',
        scale: '1:1',
        version: '6.1',
        image_id: '',
        image_ref: '',
        prompt_in: '',
        prompt_en: '',
        other_params: {
            mode: 'fast',
            style: '',
            quality: '1'
        },
        complex_params: {
            seed: '',
            iw: 1,
            q: 1,
            s: 100,
            c: 0
        }
    })
    await getDrawConfig()
})
</script>
